<template>
  <div class="accountManage">
    <!--账号管理---------面包屑-->
    <a-breadcrumb style="text-align: left;font-size: 16px;margin-left: 15px;margin-bottom: -10px">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>数据管理</a-breadcrumb-item>
      <a-breadcrumb-item>教练查询</a-breadcrumb-item>
    </a-breadcrumb>
    <!--账号管理---------分割线-->
    <a-divider/>
    <!--账号管理---------新增表单-->
    <div class="btn">
      <div class="right">
        <a-button type="danger" @click="showModal">新增</a-button>
      </div>
      <a-modal width="900px" v-model="visible" title="新增" :maskClosable="false" :closable="false">
        <template slot="footer">
          <a-button key="clear" @click="onClear">清空</a-button>
          <a-button key="back" @click="onCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="onSubmit">提交</a-button>
        </template>
        <a-form-model :model="form" :label-col="{span: 7}" :wrapper-col="{span: 16}">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="教练姓名：">
                <a-input v-model="form.name" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="教练性别：">
                <a-input v-model="form.sex" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="教练电话：">
                <a-input v-model="form.phone" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="教练介绍：">
                <a-input v-model="form.introduce" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="预约价格：">
                <a-input v-model="form.price" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="教练标签：">
                <a-input v-model="form.good" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="教练星级：">
                <a-input v-model="form.star" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="上传照片：">
                <!--style="display: none"-->
                <a-input v-model="form.cImg" :disabled="true"/>
                <a-upload-dragger
                  name="file"
                  @change="handleChange"
                  :fileList="form.cImg"
                >
                  <p class="ant-upload-drag-icon">
                    <a-icon type="inbox" />
                  </p>
                  <p class="ant-upload-text">
                    点击或拖拽文件到这里上传
                  </p>
                </a-upload-dragger>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="预览：">
                <img style="width: 140px;height: 180px" :src="form.cImg" alt="">
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
    <!--系统管理---------账号数据列表-->
    <a-table :columns="columns" :data-source="data" :loading="loadFlag" :pagination="false" :bordered="true">
      <span slot="coach_work" slot-scope="text, record">
        {{ record.coach_status === '0' ? '在职' : record.coach_status === '1' ? '离职' : '休假' }}
      </span>
    </a-table>
    <!--系统管理---------分页器-->
    <div class="pagination">
      <a-locale-provider :locale="zhCN">
        <a-pagination
          v-model="pageIndex"
          :total="total"
          :show-total="total => `共 ${total} 条数据`"
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-locale-provider>
    </div>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import qs from 'qs'
import {getCoach, addCoach} from '../http/api'
const columns = [
  {
    title: '序号',
    dataIndex: 'coach_id',
    align: 'center',
    width: 80
  }, {
    title: '姓名',
    dataIndex: 'coach_name',
    align: 'center',
    width: 80
  }, {
    title: '性别',
    dataIndex: 'coach_sex',
    align: 'center',
    width: 80
  }, {
    title: '电话',
    dataIndex: 'coach_phone',
    align: 'center',
    width: 80
  }, {
    title: '均分',
    dataIndex: 'coach_star',
    align: 'center',
    width: 80
  }, {
    title: '状态',
    dataIndex: 'coach_work',
    scopedSlots: {customRender: 'coach_work'},
    align: 'center',
    width: 80
  }
]
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  inject: ['reload'],
  data() {
    return {
      // 表格加载判断
      loadFlag: false,
      // 表格字段
      columns,
      data: null,
      // formModel 表单默认数据
      form: {
        name: null,
        sex: null,
        phone: null,
        introduce: null,
        price: null,
        good: null,
        star: null,
        cImg: null
      },
      // formModel 表单开关判断
      visible: false,
      // 组件汉化
      zhCN,
      // 分页器数据
      total: 0,
      pageIndex: 1,
      pageSize: 6,
      picsBase64: ''
    }
  },
  methods: {
    // 获取教练数据
    async getCoach() {
      await getCoach({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.data.data
        this.total = res.data.total
        // 加载动作
        setTimeout(() => {
          this.loadFlag = false
        }, 100)
      })
    },
    // 打开 Model 对话框
    showModal() {
      this.visible = true
      this.loadFlag = true
      this.onClear()
    },
    // 关闭 Model 对话框
    onCancel() {
      this.visible = false
      this.loadFlag = false
    },
    // 清空model表单
    onClear() {
      this.form = { name: null, sex: null, phone: null, introduce: null, price: null, cImg: null }
    },
    // 处理上传图片
    async handleChange(info) {
      const isJpgOrPng =
        info.file.type === "image/jpeg" || info.file.type === "image/png"
      const isLt2M = info.file.size / 1024 / 1024 < 2
      if (!isJpgOrPng) {
        this.$message.error("你只能上传jpg跟png类型的图片!")
      } else {
        if (!isLt2M) {
          this.$message.error("图片大小不能超过10MB!")
        } else {
          this.fileList = info.fileList
          for (let i in info.fileList) {
            this.form.cImg = await getBase64(info.fileList[i].originFileObj)
          }
        }
      }
    },
    // 注册账号提交表单
    onSubmit() {
      addCoach(qs.stringify(this.form)).then(res => {
        this.$message.success(res.msg)
        this.loadFlag = false
        this.reload()
      })
    },
    // 分页函数-点击换页函数
    pageChange(current, pageSize) {
      this.pageIndex = current
      this.pageSize = pageSize
      this.getCoach()
    },
    // 分页函数-每页显示条目函数
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.getCoach()
    }
  },
  created() {
    this.loadFlag = true
    this.getCoach()
  }
}
</script>
<style lang="less" scoped>
.right {
  text-align: left;
  margin: 15px 20px;
}

.pagination {
  margin: 15px 20px;
  text-align: right
}

img {
  width: 120px;
  height: 70px;
}
</style>
